<template>
  <a-select :options="mOptions">
    <template v-for="item in slotKeys.filter(key=>props[key])" #[item]>
      <component :is="renderSlot(props,item)"/>
    </template>
    <template v-if="dropdownRenderBefore || dropdownRenderAfter" #dropdownRender="{ menuNode: menu }">
      <component :is="renderSlot(props,'dropdownRenderBefore')"/>
      <VNodes :vnodes="menu" />
      <component :is="renderSlot(props,'dropdownRenderAfter')"/>
    </template>
  </a-select>
</template>
<script setup lang="ts">
import { PropType, VNode,onMounted,ref, watch } from 'vue';
import { renderSlot, requestData } from '../index'
import { DefaultOptionType } from 'ant-design-vue/lib/select';
const slotKeys = ['clearIcon','maxTagPlaceholder','menuItemSelectedIcon','notFoundContent','removeIcon','suffixIcon']
const props = defineProps({
  clearIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  maxTagPlaceholder: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  menuItemSelectedIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  notFoundContent: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  removeIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  suffixIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  dropdownRenderBefore: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  dropdownRenderAfter: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  options: {
    type: [Array] as PropType<DefaultOptionType[]>
  },
  api: { // 接口地址或接口函数--->新增属性
    type: [Function, String] as PropType<((param: any)=>Promise<any>) | String>
  },
  params: {
    type: Object,
    default(){
      return {}
    }
  },
  // 是否立即执行
  immediate: {
    type: Boolean,
    default: true
  },
  dataType: { // 数据类型// string | number
    type: String,
    default: 'string', 
  }
})
const mOptions = ref(props.options || [])
watch(()=>props.options,()=>{
  mOptions.value = props.options as any
},{
  deep: true,
})
const VNodes=(_: any, d: any) => {
  return d.attrs.vnodes;
}
const regisiter = {
  setOptions(options: any){
    mOptions.value = options
  },
  getOptions(){
    return mOptions.value
  },
  addOption(option: any) {
    mOptions.value =[
      ...mOptions.value,
      option
    ]
  },
  reload(params: any) {
    requestData(props.api,{
      ...props.params,
      ...params
    }).then(res=>{
    const v = res.data || res
    if(v instanceof Array) {
      if(props.dataType === 'number'){
        mOptions.value = v.map(item=>{
          return {
            ...item,
            value: Number(item.value)
          }
        })
      } else {
        mOptions.value = v.map(item=>{
          return {
            ...item,
            value: item.value+""
          }
        })
      }
    }
    })
  }
}
onMounted(()=>{
  if(props.immediate) {
    regisiter.reload(props.params);
  }
})
defineExpose(regisiter)
</script>
<style lang="less" scoped>

</style>